<template>
	<z-paging ref="paging" :auto="false" :default-page-size="20" loading-more-no-more-text="到底啦～" v-model="dataList" @query="queryList">
		<template #top>
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="white" @clickLeft="goBack">
				<template #left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
				<view class="flex center w-full fs-16 text-black">火火学院</view>
			</uni-nav-bar>
			<scroll-view scroll-x class="tabs bg-white flex pt-12 px-16">
				<view v-for="(category,i) in categoryList" :key="i" class="tab-item" :class="currentTab===category.id ? 'active text-color-regular fs-16 text-bold':'text-color-hint fs-15'" @click="onTabClick(category, i)">
					<text>{{category.categoryName}}</text>
				</view>
			</scroll-view>
		</template>
		<template #empty>
			<view>
				<image style="width:136px;height:136px;" src="@/center/static/svg/order/empty-order.svg"></image>
				<view class="mt-4 text-center fs-12 text-color-regular font-normal leading-17">暂无数据</view>
			</view>
		</template>
		<view class="mt-4">
			<view v-for="(item,i) in dataList" :key="i" class="mt-1 bg-white py-20 pl-20 pr-14 flex justify-between item-center" @click="toDetail(item)">
				<view class="fs-14 text-color-regular font-normal flex-1 text-cut">{{item.title}}</view>
				<image class="w-6 h-11 ml-20" src="@/static/svg/arrow-stroke.svg"></image>
			</view>
		</view>
	</z-paging>
</template>

<script setup name="College">
	import { onMounted, ref, unref } from 'vue'
	import { getContentCategoryApi, getContentListApi } from '@/api/college.js'
	
	const goBack = () => uni.navigateBack()
	
	const currentTab = ref('')
	const onTabClick = (tab, i) => {
		if (tab.id !== currentTab.value) {
			currentTab.value = tab.id
			paging.value.reload()
		}
	}
	
	const dataList = ref([])
	const paging = ref(null)

	const queryList = (pageNo, pageSize) => {
		getContentListApi({
			categoryId: currentTab.value,
			pageNum: pageNo,
			pageSize
		}).then(res => {
			paging.value.complete(res.list)
		})
	}
	
	const categoryList = ref([])
	const initData = () => {
		getContentCategoryApi().then(res => {
			categoryList.value = res.list
			if (res.list && res.list.length) {
				currentTab.value = res.list[0].id
				paging.value.reload()
			}
		})
	}
	
	const toDetail = (item) => {
		if (item.contentType === 1) {
			uni.navigateTo({
				url: `/otherPages/pages/webview/webview?title=${encodeURIComponent(item.title)}&url=${encodeURIComponent(item.details)}`,
			})
		} else {
			uni.navigateTo({
				url: '/center/pages/college/content-detail',
				success: (res) => {
					res.eventChannel.emit('acceptDataFromOpenerPage', unref(item))
				}
			})
		}
	}
	
	onMounted(() => {
		initData()
	})
</script>

<style lang="scss" scoped>
	.tabs {
		overflow: auto;
		white-space: nowrap;
		
		.tab-item {
			display: inline-flex;
			height: 30px;
			
			&:not(:last-child) {
				margin-right: 36px;
			}
		}
		.active {
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 15%;
				height: 4px;
				width: 70%;
				border-radius: 4px;
				background: $uni-primary;
			}
		}
	}
</style>
